<template>        
    <div class="person-card">

        <div class="info">

            <div class="avatar-box">
                <el-image style="width: 34px; height: 34px" :src="personInfo.favatar"/>
            </div>
            
            <div class="content-box">
                <div class="header-part">
                    <div class="name">
                        <span>{{ personInfo.fusername }} </span>
                    </div>

                    <div>
                        <span></span>
                    </div>

                    <div class="time"><span>07-26</span></div>
                </div>
                <div class="content-part">
                    <span>
                        今天吃的土豆派呢，吃多了感觉，好累啊
                    </span>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
const props = defineProps({
    personInfo:{}
})
</script>

<style scoped lang="scss">

.person-card {
    background-color: #F9F9F9;
    color: black;
    margin-top: 10px;
    border-radius: 10px;
    height: 60px;
    // 绝对定位,左上角为0,0,从这个位置定位
    // position:relative;
    // 光标移入后,指针变为手型
    cursor: pointer;
    width: 100%;
    .info {
        width: 100%;
        overflow: hidden;
        display: flex;
        .avatar-box {
            ::v-deep .el-image {
                margin-top: 10px;
                margin-right: 15px;
                border-radius: 50%;
            }
        }
       
        .content-box {
            margin-top: 10px;
            height: 40px;
            display: flex;
            width: 100%;
            flex-direction: column;
            .header-part {
                height: 20px;
                display: flex;
                width: 100%;
                // 对齐方式
                justify-content: space-between;
                .name{
                    span{
                        font-family: "Alibaba_PuHuiTi_2.0_65_Medium_65_Medium";
                        font-size:14px;
                    }
                    
                }
                .time{
                    font-size:14px;
                    margin-right: 10px;
                    
                }
                


            }
            .content-part {
                height: 20px;
                width: 100%;
                span{
                    margin-top: 5px;
                    width: 120px;
                    display:inline-block;
                    font-family: "Alibaba_PuHuiTi_2.0_65_Medium_65_Medium";
                    font-size: 12px;
                    // 设置span长度
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    height: 100%;
                }
                
            }
        }
    }
    &:hover {
        background-color:#ecf5ff;
    }
}

</style>